<%--
  Created by IntelliJ IDEA.
  User: xszx
  Date: 2025/3/3
  Time: 16:03
  To change this template use File | Settings | File Templates.

        图书管理
        用户管理
        借书还书

        注册  使用ajax注册
        添加用户   图书名   提前判断是否在数据库重复
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <script src="static/css/jquery-3.3.1.js"></script>

</head>
<body>

    <form action="/test" method="post">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>

            省市县三级联动<br>

        <select id="se1">
            <option>--请选择--</option>
        </select>省

        <select id="se2">
            <option>--请选择--</option>
        </select>市

        <select id="se3">
            <option>--请选择--</option>
        </select>县

    <button id="but">点击</button>
        <script>
            // $("#but").click(function () {
            //     $.ajax({
            //         //请求资源路径
            //         url: "/test",
            //         //是否异步  一般不写
            //         async: true,
            //         //请求参数
            //         data: {
            //             method: "get1"
            //         },
            //         //请求方式
            //         type: "POST",
            //         //响应数据形式  text  json
            //         dataType: "json",
            //         //请求成功后调用的回调函数
            //         success: function (data) {
            //             // 清空下拉框
            //             $("#se1").children().not(":eq(0)").remove()
            //             for (var i = 0; i < data.length; i++) {
            //                 console.log(data[i].name);
            //                 $("#se1").append("<option value=" + data[i].id + ">--" + data[i].name + "--</option>");
            //             }
            //
            //         }
            //     });
            // });
            // 页面加载完成
            $(function () {
                $.ajax({
                    //请求资源路径
                    url: "/test",
                    //是否异步  一般不写
                    async: true,
                    //请求参数
                    data: {
                        method: "get1"
                    },
                    //请求方式
                    type: "POST",
                    //响应数据形式  text  json
                    dataType: "json",
                    //请求成功后调用的回调函数
                    success: function (data) {
                        // 清空下拉框
                        $("#se1").children().not(":eq(0)").remove();
                        for (var i = 0; i < data.length; i++) {
                            console.log(data[i].name);
                            $("#se1").append("<option value=" + data[i].id + ">--" + data[i].name + "--</option>");
                        }

                    }
                });

            });


            $("#se1").change(function () {

                var id= $("#se1").val();
                $.ajax({
                    //请求资源路径
                    url: "/test",
                    //是否异步  一般不写
                    async: true,
                    //请求参数
                    data: {
                        method: "get",
                        id:id
                    },
                    //请求方式
                    type: "POST",
                    //响应数据形式  text  json
                    dataType: "json",
                    //请求成功后调用的回调函数
                    success: function (data) {
                        // 清空下拉框
                        $("#se2").children().not(":eq(0)").remove();
                        $("#se3").children().not(":eq(0)").remove();
                        for (var i = 0; i < data.length; i++) {
                            $("#se2").append("<option value=" + data[i].id + ">--" + data[i].name + "--</option>");
                        }

                    }
                });
            });


            $("#se2").change(function () {
                var id= $("#se2").val();
                $.ajax({
                    //请求资源路径
                    url: "/test",
                    //是否异步  一般不写
                    async: true,
                    //请求参数
                    data: {
                        method: "get",
                        id:id
                    },
                    //请求方式
                    type: "POST",
                    //响应数据形式  text  json
                    dataType: "json",
                    //请求成功后调用的回调函数
                    success: function (data) {
                        // 清空下拉框
                        $("#se3").children().not(":eq(0)").remove();
                        for (var i = 0; i < data.length; i++) {
                            $("#se3").append("<option value=" + data[i].id + ">--" + data[i].name + "--</option>");
                        }

                    }
                });

            });
        </script>


</body>
</html>
